import React, { useEffect, useRef } from 'react';
import { Application } from 'pixi.js';
import { PixijsRender } from './PixijsRender';

interface PixijsViewProps {
  render?: PixijsRender,
}

export const PixijsView: React.FC<PixijsViewProps> = ({ render }) => {
  const div = useRef<HTMLDivElement>(null);



  useEffect(() => {
    const fetchData = async () => {
      if (div.current) {
        const app = new Application();
        await app.init({ resizeTo: div.current, antialias: true, resolution: 1, });
        render.app = app;
        div.current.append(app.canvas);
      }

    }

    fetchData();
    const resizeObserver = new ResizeObserver((_entries) => {
      setTimeout(() => {
        render.app?.resize();
      }, 10);
    });

    if (div.current) resizeObserver.observe(div.current)
    return () => {
      resizeObserver.disconnect()
      render.dispose();
    };
  });



  return <div style={{ width: '100%', height: '100%', position: 'relative', clipPath: "xywh(0 0 100% 100% round 0 0)" }} ref={div} >
  </div>
};
